#wrapper {margin: 0 auto;}

/*-------------------------------------------------------------------------------
  抽奖记录
---------------------------------------------------------------------------------*/
.back-to-index,
.record-title {
  -webkit-transform-origin: center 0;
  transform-origin: center 0;
}

/*-------------------------------------------------------------------------------
  index
---------------------------------------------------------------------------------*/
.index {
  width: 100%;
  background-size: 100% auto;
}
.theme {
  width: 100%;
  background-size: 100% auto;
}
.machine {
  width: 750px;
  height: 720px;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  background: url(../images/machine2.png) no-repeat center top;
}
.game-btn {
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
}
.rule-btn {
  -webkit-transform-origin: right 0;
  transform-origin: right 0;
}

@media screen and (orientation: portrait) {
  .commbg {background-size: 675px auto;}
  .index {width: 675px;}

  /*-------------------------------------------------------------------------------
    抽奖记录
  ---------------------------------------------------------------------------------*/
  .back-to-index span.arrow,
  .record-title {background-size: 750px auto;}
  .back-to-index span, .back-to-index div  {
    transform: scale(.8);
    -webkit-transform: scale(.8);
  }
  .back-to-index span.txt {margin: 0;}
  .record-title {
    transform: scale(.9);
    -webkit-transform: scale(.9);
  }
  .back-to-index span.txt {line-height: 66.6px;}

  .record-list li .mark,
  .record-list .swiper-slide .mark {
    background-size: 750px auto;
  }

  /*-------------------------------------------------------------------------------
    index
  ---------------------------------------------------------------------------------*/
  .logo {
    left: 21px;
    top: 13px;
    width: 82px;
    height: 84px;
  }
  .theme {
    height: 356px; margin-top : -22px;
    transform: scale(.95);
    -webkit-transform: scale(.95);
  }
  .machine {
    top: 235px;
    transform: scale(.9);
    -webkit-transform: scale(.9);
  }
  .game-btn,
  .game-btn-tips span:nth-child(1),
  .game-btn-tips span:nth-child(3),
  .hand,
  .rule-btn,
  .bottom-tips span.arrow,
  .pointer span:nth-child(1),
  .pointer span:nth-child(2)  {
    background-size: 750px auto;
  }
  .game-btn {
    transform: scale(.9);
    -webkit-transform: scale(.9);
  }

  .game-time {
    font-weight: normal;
    margin-top: -14px;
    font-size: 20px;
  }

  .rule-btn {
    right: 20px;
    top: 535px;
    transform: scale(.9);
    -webkit-transform: scale(.9);
  }
  /* bottom */
  .bottom-tips {
    padding-top: 882px;
  }
  .bottom-tips-box span, .bottom-tips-box div {
    transform: scale(.8);
    -webkit-transform: scale(.8);
  }
  .tonggao {top: 5px;}
  .bottom-tips span.txt {margin: 0;}

  /*-------------------------------------------------------------------------------
    pop
  ---------------------------------------------------------------------------------*/
  .pop .commbg {background-size: 675px auto;}
  .pop-box {
    width: 562.5px;
    background-position: center top, center bottom, center 64px;
  }
  .pop-title {
    width: 507.6px;
    height: 81.9px;
    margin: 63px auto 0;
    font-size: 36px;
    line-height: 71.1px;
    background-position: 0 -523.8px;
  }
  /* btn */
  .btn {
    height: 107.1px;
    margin: 0 12.6px;
  }

  /* 无奖品 */
  .no-prize {
    height: 471.6px;
    background-size: 100% 65.7px, 100% 34.2px, 100% 375.5px;
  }
  .no-prize-content {
    width: 498.6px;
    height: 257.4px;
    margin: 18px auto 0;
    font-size: 36px;
    padding-top: 81px;
    line-height: 144.9px;
    background-position: 0 -621.9px;
  }
  .confirm1 {
    width: 360px;
    margin-top: 44.1px;
    background-position: 0 -881.1px;
  }

  /* 有奖品 */
  .get-prize {
    height: 706.5px;
    background-size: 100% 65.7px, 100% 34.2px, 100% 610.4px;
  }
  .get-prize-content {
    width: 507.6px;
    height: 406.8px;
    margin: 99px auto 40.5px;
    background-size: 100% auto;
  }
  .get-prize-title {
    margin-top: 29.7px;
    font-size: 36px;
  }
  .get-prize-content img {
    width: 288px;
  }
  .share-btn,
  .confirm2 {width: 233.1px;}
  .share-btn {background-position: 0 -999.9px;}
  .confirm2 {background-position: -373.5px -881.1px;}

  /* 选择专卖店 */
  .search-shop {
    height: 625.54px;
    background-size: 100% 65.7px, 100% 34.2px, 100% 529.4px;
  }
  .search {margin: 43.2px auto 0;}
  .select-wrap {
    height: 63px;
    width: 507.6px;
    border-radius: 27px;
    margin: 27px auto 0;
  }
  .select-wrap input[type=text] {
    width: 452.7px;
    height: 63px;
    line-height: 63px;
    font-size: 24px;
    line-height: 63px;
  }
  .select-wrap::before {
    right: 22px;
    transform: scale(.9);
  }
  #search-btn {
    width: 360px;
    height: 107.1px;
    margin-top: 40.5px;
    background: url(../images/commbg.png) no-repeat -249.3px -999.9px;
    background-size: 675px auto;
  }

  /* 选择服务中心 */
  .choose-shop {
    height: 951.3px;
    background-size: 100% 65.7px, 100% 34.2px, 100% 855.2px;
  }
  .shops {height: 589.5px; margin: 30.6px 4.5px;}
  .shops li {
    width: 507.6px;
    margin: 0 auto 27px;
    border-radius: 18px;
    padding: 22.5px 27px;
    font-size: 24px;
  }
  .shop-title {
    font-size: 30px;
    margin-bottom: 4.5px;
  }
  .back {width: 233.1px; background-position: 0 -1122.3px;}

  /* 领奖专卖店 */
  .change-shop {
    min-height: 546.3px;
    background-size: 100% 65.7px, 100% 34.2px, 100% 450.2px;
  }
  .pop .change-shop .shops,
  .pop .change-shop .btn-wrap {background-size: 546.3px auto;}
  .change-shop .btn-wrap {margin-bottom: 32.4px;}
  .change-btn {width: 233.1px; background-position: -237.6px -1122.3px;}
  /* 2017-4-20 add*/
  .yes-btn {width: 233.1px; background-position: 0 -1241.1px;}

  /* rule */
  .rule {
    height: 756px;
    overflow: visible;
    background-size: 100% 65.7px, 100% 34.2px, 100% 659.9px;
  }
  .rule-content {
    width: 506.7px;
    height: 530.1px;
    border-radius: 13px;
    margin: 43.2px auto 0;
    font-size: 24px;
    line-height: 1.25;
    padding: 4.5px 0;
  }
  .rule-content p {margin-bottom: 18px;}
  .rule-content .table {margin-bottom: 18px;}
  .rule-content .table-cell:nth-child(1) {width: 91.8px; padding-right: 9px;}
  .rule-content .table-cell:nth-child(3) {width: 135px; }
  .rule .close {
    right: -18px;
    top: -18px;
    width: 55.8px;
    height: 66.6px;
    background-position: -189px -36px;
  }

  .rule-scorll {
    padding: 18px 27px;
    border-radius: 9px;
  }

  /* 分享 */
  .share {
    background: rgba(0,0,0,.5) url(../images/share.png) no-repeat center 76.5px;
    background-size: 507.6px auto;
  }

  /*-------------------------------------------------------------------------------
    tips.html
  ---------------------------------------------------------------------------------*/
  .tips-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
  }
}
@media screen and (orientation: landscape) {
  .commbg {background-size: 375px auto;}
  #wrapper {width: 375px;}

  /*-------------------------------------------------------------------------------
    抽奖记录
  ---------------------------------------------------------------------------------*/
  .back-to-index span.arrow,
  .record-title {background-size: 750px auto;}
  .back-to-index {
    transform: scale(.4);
    -webkit-transform: scale(.4);
  }
  .record-title {
    transform: scale(.5);
    -webkit-transform: scale(.5);
  }
  /*.back-to-index {margin-bottom: -37px;}*/
  .back-to-index {text-align: center;}
  .back-to-index span.txt {
    font-size   : 26px;
    color       : #fff;
    line-height : 37px;
    margin      : 0 10px;
  }

  .record-list {
    left: 0; width: 375px; padding-top: 83.5px; margin: 0;
  }
  .record-list .swiper-slide {
    width: 375px; margin-bottom: 24px; /*padding: 30px 0 0 31px;*/
    margin-top: 13px; padding: 15px 0 0 31px;
    background-position: 31px top, 31px bottom, left center;
    background-size: 312.5px auto, 312.5px auto, 43px auto;
  }
  .record-item {min-height: 101.5px; background-size: 312.5px auto; margin-bottom: 24px;}
  .record-list-img {
    left: 37px;
    top: 45px;
    width: 80px;
  }
  .record-list-right {
    width: 210px;
    margin-left: 90px;
  }
  .record-list-title {font-size: 17px; margin-top: 11px;}
  .record-list-desc {
    font-size: 13px; line-height: 16px; margin: 5px 0;
  }
  .record-list-tips {
    min-width: 125px;
    border-radius: 5px;
    font-size: 12px;
    padding: 4px;
  }
  .record-list li .mark,
  .record-list .swiper-slide .mark {
    position: absolute;
    right: 17.5px;
    top: -13.5px;
    background-size: 750px auto;
    transform-origin: right 0;
    -webkit-transform-origin: right 0;
    transform: scale(.5);
    -webkit-transform: scale(.5);
  }
  /*.record-list .swiper-slide.get {
    background-position: 30px top, 30px bottom, left center;
    background-size: 316.5px auto, 316.5px auto, 36px auto;
  }
  .swiper-slide.get .record-item {background-size: 316.5px auto;}*/

  /* 无中奖记录 */
  .no-record {
    position: absolute;
    left: 50%;
    top: 96.5px;
    width: 317.5px;
    height: 152px;
    margin-left: -156px;
    font-size: 20px;
    padding-top: 56px;
    background-size: 100% auto;
  }

  /* 未中奖 */
  .record-list .swiper-slide.none .record-item {padding-right: 31px; margin-top: 11px; height: 102px;}
  .record-list .swiper-slide.none .leaf {
    width: 43.5px;
    background-size: 100% auto;
  }
  .record-none-txt {font-size: 17px;}

  /*-------------------------------------------------------------------------------
    index
  ---------------------------------------------------------------------------------*/
  .logo {
    left: 12px;
    top: 7.5px;
    width: 45.5px;
    height: 46.5px;
  }
  .theme {
    width: 100%; height: 198px; margin-top : -18px;
    background-size: 395px auto;
    transform: scale(.9);
    -webkit-transform: scale(.9);
  }
  .machine {
    top: 129px;
    transform: scale(.5);
    -webkit-transform: scale(.5);
  }
  .game-btn,
  .game-btn-tips span:nth-child(1),
  .game-btn-tips span:nth-child(3),
  .hand,
  .rule-btn,
  .bottom-tips span.arrow,
  .pointer span:nth-child(1),
  .pointer span:nth-child(2)  {
    background-size: 750px auto;
  }
  .game-btn {
    transform: scale(.95);
    -webkit-transform: scale(.95);
  }
  .game-time {font-size: 18px; font-weight: normal; margin-top: -10px;}
  .rule-btn {
    right: 12px;
    top: 301px;
    transform: scale(.5);
    -webkit-transform: scale(.5);
  }
  /* bottom */
  .bottom-tips {
    padding-top: 489px;
  }
  .bottom-tips-box {padding-top: 5px;}
  .bottom-tips-box span, .bottom-tips-box div {
    transform: scale(.4);
    -webkit-transform: scale(.4);
  }
  .tonggao {left: 50%; top: -5px; width: 200%; margin-left: -100%; white-space: nowrap;}
  .bottom-tips span.txt {margin: 0;}
  .bottom-tips span.arrow:nth-child(1) {transform: translateX(70px) scale(.4);}
  .bottom-tips span.arrow:nth-child(3) {transform: translateX(-70px) scale(.4);}

  /*-------------------------------------------------------------------------------
    pop
  ---------------------------------------------------------------------------------*/
  .pop .commbg {background-size: 375px auto;}
  .pop-box {
    width: 312.5px;
    background-position: center top, center bottom, center 35px;
  }
  .pop-title {
    width: 282px;
    height: 45.5px;
    margin: 35px auto 0;
    font-size: 20px;
    line-height: 39.5px;
    background-position: 0 -291px;
  }
  /* btn */
  .btn {
    height: 59.5px;
    margin: 0 7px;
  }

  /* 无奖品 */
  .no-prize {
    height: 262px;
    background-size: 100% 36.5px, 100% 19px, 100% 209px;
  }
  .no-prize-content {
    width: 277px;
    height: 143px;
    margin: 10px auto 0;
    font-size: 20px;
    padding-top: 45px;
    line-height: 80.5px;
    background-position: 0 -345.5px;
  }
  .confirm1 {
    width: 200px;
    margin-top: 24.5px;
    background-position: 0 -489.5px;
  }

  /* 有奖品 */
  .get-prize {
    height: 392.5px;
    background-size: 100% 36.5px, 100% 19px, 100% 340px;
  }
  .get-prize-content {
    width: 282px;
    height: 226px;
    margin: 55px auto 22.5px;
    background-size: 100% auto;
  }
  .get-prize-title {
    margin-top: 16.5px;
    font-size: 20px;
  }
  .get-prize-content img {
    width: 160px;
  }
  .share-btn,
  .confirm2 {width: 129.5px;}
  .share-btn {background-position: 0 -555.5px;}
  .confirm2 {background-position: -207.5px -489.5px;}

  /* 选择专卖店 */
  .search-shop {
    height: 347.5px;
    background-size: 100% 36.5px, 100% 19px, 100% 300px;
  }
  .search {margin: 24px auto 0;}
  .select-wrap {
    height: 35px;
    width: 282px;
    border-radius: 20px;
    margin: 15px auto 0;
  }
  .select-wrap input[type=text] {
    width: 251.5px;
    height: 35px;
    line-height: 35px;
    font-size: 13px;
    line-height: 35px;
  }
  .select-wrap::before {
    right: 6.5px;
    transform: scale(.5);
  }
  #search-btn {
    width: 200px;
    height: 59.5px;
    margin-top: 22.5px;
    background: url(../images/commbg.png) no-repeat -138.5px -555.5px;
    background-size: 375px auto;
  }

  /* 选择服务中心 */
  .choose-shop {
    height: 528.5px;
    background-size: 100% 36.5px, 100% 19px, 100% 476px;
  }
  .shops {height: 327.5px; margin: 17px 2.5px;}
  .shops li {
    width: 282px;
    margin: 0 auto 15px;
    border-radius: 10px;
    padding: 12.5px 15px;
    font-size: 13px;
  }
  .shop-title {
    font-size: 17px;
    margin-bottom: 2.5px;
  }
  .back {width: 129.5px; background-position: 0 -623.5px;}

  /* 领奖专卖店 */
  .change-shop {
    min-height: 303.5px;
    background-size: 100% 36.5px, 100% 19px, 100% 251px;
  }
  .pop .change-shop .shops,
  .pop .change-shop .btn-wrap {background-size: 312.5px auto;}
  .change-shop .btn-wrap {margin-bottom: 18px;}
  .change-btn {width: 129.5px; background-position: -132px -623.5px;}
  /* 2017-4-20 add*/
  .yes-btn {width: 129.5px; background-position: 0 -689.5px;}

  /* rule */
  .rule {
    height: 420px;
    overflow: visible;
    background-size: 100% 36.5px, 100% 19px, 100% 368px;
  }
  .rule-content {
    width: 281.5px;
    height: 294.5px;
    border-radius: 5px;
    margin: 24px auto 0;
    font-size: 13px;
    line-height: 1.25;
    padding: 2.5px 0;
  }
  .rule-content p {margin-bottom: 10px;}
  .rule-content .table {margin-bottom: 10px;}
  .rule-content .table-cell:nth-child(1) {width: 51px; padding-right: 5px;}
  .rule-content .table-cell:nth-child(3) {width: 75px; padding-left: 5px;}
  .rule .close {
    right: -10px;
    top: -10px;
    width: 31px;
    height: 37px;
    background-position: -105px -20px;
  }

  .rule-scorll {
    padding: 10px 15px;
    border-radius: 5px;
  }

  /* 分享 */
  .share {
    background: rgba(0,0,0,.5) url(../images/share.png) no-repeat center 42.5px;
    background-size: 282px auto;
  }

  /*-------------------------------------------------------------------------------
    tips.html
  ---------------------------------------------------------------------------------*/
  .tips-wrapper {
    width: 375px;
    background-size: 375px auto;
  }
  .tips-mask {position: fixed;}
  .tips-start {
    top: 115px;
    left: 50%;
    width: 230.5px;
    height: 228px;
    margin-left: -107.5px;
    background-size: 100% auto;
  }
  .tips-end {
    top: 106px;
    left: 50%;
    width: 241px;
    height: 189.5px;
    margin-left: -119.5px;
    background-size: 241px auto;
  }
}